<template>
  <div class="siderBar">
    <div class="left-sideBar">
      <div class="user-msg">
        <div class="user-avatar">
          <img src="../assets/icons/avatar.png" alt="">
        </div>
        <div class="commpany-name">
          玩购啦
        </div>
      </div>
      <ul class="sidebar-list">
        <li class="list-item" :class="item.isActive?'active':''" @click="handleClickSel(item)" v-for="(item,index) in sidebarData" :key="index">
          <div class="imgBox">
            <img :src="'./static/img/'+ item.icon +'.png'" alt="">
          </div>
          {{item.name}}
        </li>
      </ul>
    </div>
    <ul class="right-siderBar" v-show="rightSideBar.length>0">
      <li @click="handleClickRightSideBar(item)" :class="item.isActive?'active':''" class="listItem" v-for="(item, index) in rightSideBar" :key="index">
        {{item.label}}
      </li>
    </ul>
  </div>
</template>
<script>
import sideData from "../data/siderBar.json";
import rightSideBar from "../data/childSideBar.json";
export default {
  props: {},
  created() {
    this.getUserInfoByToken();
  },
  watch: {
    $route(to, from) {
      this.currentRouter = to.name;
      to.params.type ? (this.currentRouterType = to.params.type) : "";
    }
  },
  methods: {
    //点击导航栏切换路由
    handleClickSel(target) {
      let fIndex = target.index;
      for (let item of this.sidebarData) {
        item.isActive = false;
        if (item.icon === target.icon) {
          item.isActive = true;
          // 这里当点击第一级导航的时候 二级导航高亮初始化
          if (this.rightSideBar.length >= 1) {
            for (let item of this.rightSideBar) {
              item.isActive = false;
              this.rightSideBar[0].isActive = true;
            }
          }
        }
      }
      if (
        target.icon === "category" ||
        target.icon === "application" ||
        target.icon === "statis" ||
        target.icon === "user" ||
        target.icon === "marketing"
      ) {
        this.$router.push({
          name: target.icon,
          params: { type: "1" }
        });

        return;
      }
      if (target.icon === "order") {
        this.$router.push({
          name: target.icon,
          params: { type: -1 }
        });
        return;
      }
      if (target.icon === "goods" || target.icon === "task") {
        this.$router.push({
          name: target.icon,
          params: { type: "all" }
        });
        return;
      }
      if (target.icon === "cooperation") {
        this.$router.push({
          name: target.icon,
          params: { type: "1" }
        });
        return;
      }
      this.$router.push({ name: target.icon });
    },

    //点击子导航栏目
    handleClickRightSideBar(target) {
      for (let item of this.rightSideBar) {
        item.isActive = false;
        if (item.label === target.label) {
          item.isActive = true;
        }
      }
      this.$emit("handleClickRightSideBar", target);
    },
    // 初始化菜单，在获取信息getUserInfoByToken()的成功回调里执行

    initAdminMenu() {
      // 管理员 group_id === 0
      if (this.group_id === 0) {
        this.sidebarData = sideData.siderBar; //绑定左边导航栏数
      } else {
        // 普通人员 group_id !== 0
        this.sidebarData = [
          {
            name: "类目",
            icon: "category",
            isActive: false,
            index: 2
          },
          {
            name: "商品",
            icon: "goods",
            isActive: false,
            index: 3
          },
          {
            name: "订单",
            icon: "order",
            isActive: false,
            index: 4
          }
        ]; //绑定左边导航栏数据
      }
      this.initMenuActive(); // 更新菜单的导航高亮
    },

    //初始化
    initMenuActive() {
      let currentIndex = 0; //最左侧导航的序号
      const currentRoute = this.$router.currentRoute.name; //获取当前的路由地址
      //左侧导航栏高亮
      for (let item of this.sidebarData) {
        item.isActive = false;
        if (item.icon === currentRoute) {
          item.isActive = true;
          currentIndex = item.index;
        }
        if (item.icon === "category" && currentRoute === "newGroup") {
          item.isActive = true;
        } else if (
          (item.icon === "category" && currentRoute === "newCategory") ||
          (item.icon === "category" && currentRoute === "newSubclass")
        ) {
          item.isActive = true;
        } else if (item.icon === "order" && currentRoute === "orderDetail") {
          item.isActive = true;
        } else if (item.icon === "goods" && currentRoute === "goodsDetail") {
          item.isActive = true;
        }
      }
      //右侧子导航栏高亮
      for (let item of rightSideBar.childSideBar[currentIndex].target) {
        item.isActive = false;
        if (item.value == this.$router.currentRoute.params["type"]) {
          item.isActive = true;
        }
      }
      this.rightSideBar = rightSideBar.childSideBar[currentIndex].target;

      //特殊的导航栏高亮：消消乐页面
      if (currentRoute === "xiaoxiaole") {
        this.sidebarData[7].isActive = true;
        for (let item of rightSideBar.childSideBar[7].target) {
          item.isActive = false;
          if (item.value == this.$router.currentRoute.params["type"]) {
            item.isActive = true;
          }
        }
        this.rightSideBar = rightSideBar.childSideBar[7].target;
      }
    },
    //获取用户的token信息
    getUserInfoByToken() {
      this.$http(
        "/wgl_admin/index.php?app=admin&act=user_info",
        "get",
        {},
        {},
        {},
        success => {
          this.group_id = success.data.group_id;
          this.initAdminMenu();
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    }
  },
  data() {
    return {
      currentRouter: "",
      currentRouterType: "",

      sidebarData: [],
      rightSideBar: [],
      group_id: undefined
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  }
};
</script>

<style lang="scss" scoped>
.sidebar-list {
  .list-item {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #cbcbcb;
    font-size: 16px;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    .imgBox {
      display: block;
      float: left;
      width: 20px;
      height: 50px;
      padding: 15px 0;
      margin-right: 15px;
      margin-left: 40px;
      > img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .list-item:hover {
    background: #26344f;
    color: #fff;
  }
  .active.list-item {
    background: #26344f;
    color: #fff;
  }
  .list-item:before {
    float: left;
    background: transparent;
    height: 50px;
    content: "";
    width: 4px;
  }
  .list-item:hover.list-item:before {
    background: #3f87f5;
  }
  .active.list-item:before {
    background: #3f87f5;
  }
}

.siderBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 10;
  .left-sideBar {
    background: #384661;
    height: 100%;
    width: 180px;
    float: left;
  }
  .right-siderBar {
    float: left;
    width: 118px;
    background: #26344f;
    height: 100%;
    margin-top: 70px;
    padding-top: 56px;
    color: #999;
    font-size: 16px;
    .listItem {
      display: block;
      height: 30px;
      line-height: 30px;
      width: 100%;
      cursor: pointer;
      text-align: center;
      margin-bottom: 70px;
    }
    .listItem.active {
      color: #3f87f5;
      transition: all 0.3s ease;
    }
    .listItem.active:after {
      content: "";
      display: block;
      margin: 0 auto;
      width: 88px;
      height: 3px;
      background: #3f87f5;
    }
    .listItem:hover {
      color: #3f87f5;
    }
    .listItem:hover.listItem:after {
      content: "";
      display: block;
      margin: 0 auto;
      width: 88px;
      height: 3px;
      background: #3f87f5;
    }
  }
}

.user-msg {
  background: #384661;
  width: 180px;
  height: 70px;
  padding-left: 24px;
  margin-bottom: 5px;
  .user-avatar {
    display: block;
    float: left;
    margin-right: 22px;
    padding: 10px 0;
    > img {
      display: block;
      width: 50px;
      height: 50px;
    }
  }
  .commpany-name {
    float: left;
    color: #fff;
    font-size: 16px;
    height: 70px;
    line-height: 70px;
    font-family: "pingFang-SC-Medium";
  }
}
</style>
